<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动作游戏 - 4399小游戏</title>
    <link rel="stylesheet" href="../css/styles.css">
    <script src="../js/main.js" defer></script>
</head>
<body>
    <header>
        <nav class="main-nav">
            <div class="logo">
                <h1>4399小游戏</h1>
            </div>
            <ul class="nav-links">
                <li><button id="uploadBtn" class="upload-btn">上传游戏</button></li>
                <li><a href="../index.html">首页</a></li>
                <li><a href="#" class="active">小游戏</a></li>
                <li class="user-actions">
                    <button id="loginBtn" class="login-btn">登录</button>
                    <button id="registerBtn" class="register-btn">注册</button>
                </li>
            </ul>
            <div class="search-box">
                <input type="text" placeholder="搜索游戏...">
                <button>搜索</button>
            </div>
        </nav>
    </header>

    <div class="container">
        <aside class="sidebar">
            <div class="sidebar-section">
                <h3>快速导航</h3>
                <ul>
                    <li><a href="#"><i class="icon">🎮</i>热门游戏</a></li>
                    <li><a href="#"><i class="icon">🌟</i>最新游戏</a></li>
                    <li><a href="#"><i class="icon">🏆</i>排行榜</a></li>
                </ul>
            </div>
            <div class="sidebar-section">
                <h3>游戏分类</h3>
                <ul>
                    <li><a href="casual.html"><i class="icon">🎲</i>休闲游戏</a></li>
                    <li><a href="action.html" class="active"><i class="icon">⚔️</i>动作游戏</a></li>
                    <li><a href="puzzle.html"><i class="icon">🧩</i>益智游戏</a></li>
                    <li><a href="adventure.html"><i class="icon">🏃</i>冒险游戏</a></li>
                </ul>
            </div>
        </aside>

        <main>
            <section class="category-header">
                <h2>动作游戏</h2>
                <p>刺激紧张的动作游戏，考验您的反应速度和操作技巧</p>
            </section>

            <section class="games-grid">
                <div class="game-card">
                    <img src="https://via.placeholder.com/200x150" alt="街头格斗">
                    <h3>街头格斗</h3>
                    <p>经典街机格斗游戏</p>
                </div>
                <div class="game-card">
                    <img src="https://via.placeholder.com/200x150" alt="忍者冒险">
                    <h3>忍者冒险</h3>
                    <p>快节奏动作冒险游戏</p>
                </div>
                <div class="game-card">
                    <img src="https://via.placeholder.com/200x150" alt="赛车竞速">
                    <h3>赛车竞速</h3>
                    <p>极速赛车挑战游戏</p>
                </div>
                <div class="game-card">
                    <img src="https://via.placeholder.com/200x150" alt="超级英雄">
                    <h3>超级英雄</h3>
                    <p>拯救世界的英雄游戏</p>
                </div>
                <div class="game-card">
                    <img src="https://via.placeholder.com/200x150" alt="机器人战争">
                    <h3>机器人战争</h3>
                    <p>机器人大战动作游戏</p>
                </div>
                <div class="game-card">
                    <img src="https://via.placeholder.com/200x150" alt="太空战士">
                    <h3>太空战士</h3>
                    <p>未来科幻战斗游戏</p>
                </div>
            </section>
        </main>
    </div>

    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h4>关于我们</h4>
                <ul>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">关于作者</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>帮助中心</h4>
                <ul>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">游戏攻略</a></li>
                    <li><a href="#">意见反馈</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>关注我们</h4>
                <div class="social-links">
                    <a href="https://weixin.qq.com/" target="_blank" title="关注我们的微信公众号">微信</a>
                    <a href="https://im.qq.com/" target="_blank" title="加入我们的QQ群">QQ</a>
                </div>
            </div>
        </div>
        <div class="copyright">
            <p>© 2025 4399小游戏. All rights reserved.</p>
        </div>
    </footer>

    <script src="../js/api.js"></script>
    <script src="../js/main.js"></script>
    <script src="../js/upload.js"></script>
    
    <!-- 登录模态框 -->
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>用户登录</h2>
            <form id="loginForm">
                <div class="form-group">
                    <label for="loginUsername">用户名</label>
                    <input type="text" id="loginUsername" name="username" required>
                </div>
                <div class="form-group">
                    <label for="loginPassword">密码</label>
                    <input type="password" id="loginPassword" name="password" required>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn-primary">登录</button>
                    <div class="form-links">
                        <a href="#" id="forgotPassword">忘记密码?</a>
                        <a href="#" id="switchToRegister">没有账号? 立即注册</a>
                    </div>
                </div>
                <div class="social-login">
                    <p>使用社交账号登录</p>
                    <div class="social-buttons">
                        <button type="button" class="social-btn wechat">微信</button>
                        <button type="button" class="social-btn qq">QQ</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div id="registerModal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>用户注册</h2>
            <form id="registerForm">
                <div class="form-group">
                    <label for="registerUsername">用户名</label>
                    <input type="text" id="registerUsername" name="username" required>
                </div>
                <div class="form-group">
                    <label for="registerEmail">邮箱</label>
                    <input type="email" id="registerEmail" name="email" required>
                </div>
                <div class="form-group">
                    <label for="registerPassword">密码</label>
                    <input type="password" id="registerPassword" name="password" required>
                </div>
                <div class="form-group">
                    <label for="confirmPassword">确认密码</label>
                    <input type="password" id="confirmPassword" name="confirmPassword" required>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn-primary">注册</button>
                    <div class="form-links">
                        <a href="#" id="switchToLogin">已有账号? 立即登录</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
</html> 